<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="application/json, text/plain, */*; charset=utf-8" />
<meta http-equiv="Accept" content="application/json, text/plain, */*" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" />

<title>Baby Logs</title>
</head>
<body data-ng-app="babyApp">
	<div data-ng-controller="LogController">

		<div data-role="page" id="home">
			<div data-role="main" class="ui-content">
				<p>
					View internal page called <a href="#addlog">add log</a>
				</p>
				<p>
					View internal page called <a href="#listing">listing</a>
				</p>
			</div>
		</div>


		<div data-role="page" id="addlog">
			<div data-role="main" class="ui-content">

				<!-- <slider floor="0" ceiling="60" step="1" precision="0" data-ng-model="newLog.leftBreast"></slider> -->
				<table data-role="table" data-mode="reflow" class="ui-responsive">
					<tbody>
						<tr>
							<td>TIME</td>
							<td><input type="date" data-ng-model="timestampString" data-role="date"/></td>
						</tr>
						<tr>
							<td>LB</td>
							<td><input type="text" data-ng-model="newLog.leftBreast" /></td>
						</tr>
						<tr>
							<td>RB</td>
							<td><input type="text" data-ng-model="newLog.rightBreast" /></td>
						</tr>
						<tr>
							<td>PM</td>
							<td><input type="text" data-ng-model="newLog.pumped" /></td>
						</tr>
						<tr>
							<td>FM</td>
							<td><input type="text" data-ng-model="newLog.formula" /></td>
						</tr>
					</tbody>
				</table>
				<br />
				<button data-ng-click="save()">Log Data</button>
				<p>
					View internal page called <a href="#home">home</a>
				</p>
			</div>
		</div>

		<div data-role="page" id="listing">
			<div data-role="main" class="ui-content">

				<div class="ui-grid-a">
					<div class="ui-block-a">
			            <pre>pagedItems.length: {{pagedItems.length|json}}</pre>
			            <pre>currentPage: {{currentPage|json}}</pre>
			            <pre>currentPage: {{sort|json}}</pre>
			            
						<button class="ui-btn ui-btn-b ui-btn-inline ui-mini" data-ng-click="findAll()">findAll</button>
						<button class="ui-btn ui-btn-b ui-btn-inline ui-mini" data-ng-click="findSinceSunday()">findSinceSunday</button>
						<button class="ui-btn ui-btn-b ui-btn-inline ui-mini" data-ng-click="findSinceThe1st()">findSinceThe1st</button>
						<button class="ui-btn ui-btn-b ui-btn-inline ui-mini" data-ng-click="findSinceLastNDays(10)">findSinceLastNDays</button>
						<select data-ng-model="logMonth" 
								data-ng-change="findAllForTheMonthOf(logMonth)" 
								data-ng-options="logMonth as logMonth|date:'MMM yyyy' for logMonth in logMonths"  
								data-mini="true">
						</select>
						<!-- <br><br>
						<a href="#" class="ui-btn ui-btn-b ui-btn-inline" data-ng-click="findAll()">findAll</a><br/>
						<a href="#" class="ui-btn ui-btn-b ui-btn-inline" data-ng-click="findSinceSunday()">findSinceSunday</a><br/>
						<a href="#" class="ui-btn ui-btn-b ui-btn-inline" data-ng-click="findSinceThe1st()">findSinceThe1st</a><br/>
						<a href="#" class="ui-btn ui-btn-b ui-btn-inline" data-ng-click="findSinceLastNDays(10)">findSinceLastNDays</a><br/>
						 -->
						<p>
							View internal page called <a href="#home">home</a>
						</p>
					</div>
					<div class="ui-block-b">
						<table data-role="table" data-mode="reflow" class="ui-responsive table table-striped table-condensed table-hover">
							<thead>
								<tr>
									<th>Action</th>
									<th class="timestamp" data-custom-sort data-order="'timestamp'" data-sort="sort">Date</th>
									<th class="timestamp" data-custom-sort data-order="'timestamp'" data-sort="sort">Time</th>
									<th class="leftBreast" data-custom-sort data-order="'leftBreast'" data-sort="sort">&nbsp;&nbsp;LB&nbsp;&nbsp;</th>
									<th class="rightBreast" data-custom-sort data-order="'rightBreast'" data-sort="sort">&nbsp;&nbsp;RB&nbsp;&nbsp;</th>
									<th class="pumped" data-custom-sort data-order="'pumped'" data-sort="sort">&nbsp;&nbsp;PM&nbsp;&nbsp;</th>
									<th class="formula" data-custom-sort data-order="'formula'" data-sort="sort">&nbsp;&nbsp;FM&nbsp;&nbsp;</th>
									<th class="diaper" data-custom-sort data-order="'diaper'" data-sort="sort">Diapers</th>
								</tr>
							</thead>
				            <tfoot>
				                <td colspan='8'>
				                    <div class="pagination pull-right">
				                        <ul>
				                            <li data-ng-class="{disabled: currentPage == 0}">
				                                <a href="#" data-ng-click="prevPage()">« Prev</a>
				                            </li>
				
				                            <li data-ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) " data-ng-class="{active: n == currentPage}" data-ng-click="setPage()">
				                                <a href="#" data-ng-bind="n + 1">1</a>
				                            </li>
				
				                            <li data-ng-class="{disabled: (currentPage) == pagedItems.length - 1}">
				                                <a href="#" data-ng-click="nextPage()">Next »</a>
				                            </li>
				                        </ul>
				                    </div>
				                </td>
				            </tfoot>
							<tbody>
								<!-- <tr data-ng-repeat='log in logs track by $index'> -->
								<tr data-ng-repeat="log in pagedItems[currentPage] | orderBy:sort.sortingOrder:sort.reverse">
									<td><a data-ng-href="#" class="ui-btn ui-btn-b ui-btn-inline ui-icon-delete ui-btn-icon-left ui-corner-all ui-mini" data-ng-click="delete(log.id)">{{log.id}}</a></td>
									<td>&nbsp;&nbsp;{{log.timestamp | date : "MMM dd yyyy"}}&nbsp;&nbsp;</td>
									<td>&nbsp;&nbsp;{{log.timestamp | date : "hh:mm a"}}&nbsp;&nbsp;</td>
									<td>&nbsp;&nbsp;{{log.leftBreast}}&nbsp;&nbsp;</td>
									<td>&nbsp;&nbsp;{{log.rightBreast}}&nbsp;&nbsp;</td>
									<td>&nbsp;&nbsp;{{log.pumped}}&nbsp;&nbsp;</td>
									<td>&nbsp;&nbsp;{{log.formula}}&nbsp;&nbsp;</td>
									<td>&nbsp;&nbsp;{{log.diaper}}&nbsp;&nbsp;</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>

	</div>

	<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
	<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.js"></script>
	<script src="https://code.angularjs.org/1.2.21/angular.js" type="text/javascript"></script>
	<script src="https://code.angularjs.org/1.2.21/angular-resource.js" type="text/javascript"></script>
	<script src="js/res.js" type="text/javascript"></script>
</body>
</html>